<div class=" bk-side-child">
	<div class="layui-card bk_full has_header left_tree">
		<div class="layui-card-header">
			<h1>目录树</h1>
		</div>
		<div class="bk_full">
			<div id="test1" class="demo-tree demo-tree-box"></div>
		</div>
		<!-- 左侧子树 -->
	</div>
</div>
<div class="layui-fluid" style=" margin-left:262px;">
	<div class="layui-card">
		<form class="layui-form" action="">
			<div class="layui-row bk_search_box">
				<div class="layui-col-xs4">
					<div class="layui-form-item">
						<label class="layui-form-label">文件类型 </label>
						<div class="layui-input-block">
							<select name="city" lay-verify="required">
								<option value=""></option>
								<option value="0">北京</option>
								<option value="1">上海</option>
								<option value="2">广州</option>
								<option value="3">深圳</option>
								<option value="4">杭州</option>
							</select>
						</div>
					</div>
				</div>
				<div class="layui-col-xs4">
					<div class="layui-form-item">
						<label class="layui-form-label">选择区域</label>
						<div class="layui-input-block">
							<select name="city" lay-verify="required">
								<option value=""></option>
								<option value="0">北京</option>
								<option value="1">上海</option>
								<option value="2">广州</option>
								<option value="3">深圳</option>
								<option value="4">杭州</option>
							</select>
						</div>
					</div>
				</div>
				<div class="layui-col-xs4">
					<div class="layui-form-item">
						<label class="layui-form-label">关键字</label>
						<div class="layui-input-block">
							<input type="text" name="title" required lay-verify="required" placeholder="请输搜索关键字" autocomplete="off" class="layui-input">
						</div>
					</div>
				</div>
				<div class="right_btn"><button type="button" class="layui-btn">查询</button><button type="button" class="layui-btn layui-btn-primary">重置</button></div>
			</div>
		</form>
		<div class="layui-card-body">
			<div class="layui-card-header bk_card_header">
				<a href="#/member/all/edit" class="layui-btn layui-btn-xs">
					<i class="layui-icon">&#xe654;</i> <span>新增</span> </a>
				<a id="search_hash" class="layui-btn layui-btn-xs">
					<i class="layui-icon">&#xe642;</i> <span>编辑</span>
				</a>
				 
			</div>
			<div class="layui-card-body bk_card_body">
				<table id="demo_hash" lay-even="" lay-filter="test_hash">
				</table>
				<script type="text/html" id="barDemo_hash">
					<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
              <!-- <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> -->
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
			</div>
		</div>
	</div>
</div>
<script type="text/html" id="search_tpl_hash">
	<form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">用户名</label>
      <div class="layui-input-block">
        <input type="text" name="title" placeholder="请输入用户名.." autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">城市</label>
      <div class="layui-input-block">
        <select name="city">
          <option value=""></option>
          <option value="0">北京</option>
          <option value="1">上海</option>
          <option value="2">广州</option>
          <option value="3">深圳</option>
          <option value="4">杭州</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">是否禁用</label>
      <div class="layui-input-block">
        <input type="checkbox" name="switch" lay-skin="switch">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-block">
        <input type="radio" name="sex" value="男" title="男">
        <input type="radio" name="sex" value="女" title="女" checked>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo_hash"><i class="layui-icon">&#xe615;</i> 搜索</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</script>
<script>
	layui.config({
		base: '/src/js/'
	}).use(['jquery', 'mockjs', 'table', 'sidebar', 'form'], function() {
		var $ = layui.jquery,
			layer = layui.layer,
			table = layui.table,
			sidebar = layui.sidebar,
			form = layui.form;
		// 注入mock
		layui.mockjs.inject({
			'POST /demo/table/user': {
				code: 0,
				msg: "xxx",
				count: 1000,
				'data|20': [{
					'id|+1': 1,
					username: '@name',
					sex: '@boolean',
					city: '@city',
					sign: '@csentence',
					experience: '@integer',
					score: '@integer',
					classify: '@word',
					wealth: '@integer',
					auth: '@boolean'
				}]
			}
		});
		//第一个实例
		table.render({
			method: 'post',
			// size: 'sm',
			limit: 20,
			elem: '#demo_hash',
			toolbar: false, //false
			height: 'full-203', //表格区域的高度值
			url: '/demo/table/user', //数据接口
			page: true, //开启分页
			cols: [
				[ //表头
					{
						field: 'id',
						title: 'ID',
						width: 80,
						sort: true,
						fixed: 'left'
					}, {
						field: 'username',
						title: '用户名',
						width: 80
					}, {
						field: 'sex',
						title: '性别',
						width: 80,
						sort: true
					}, {
						field: 'city',
						title: '城市',
						width: 80
					}, {
						field: 'sign',
						title: '签名',
						width: 177
					}, {
						field: 'experience',
						title: '积分',
						width: 80,
						sort: true
					}, {
						field: 'score',
						title: '评分',
						width: 80,
						sort: true
					}, {
						field: 'classify',
						title: '职业',
						width: 80
					}, {
						field: 'wealth',
						title: '财富',
						width: 135,
						sort: true
					}, {
						fixed: 'right',
						width: 180,
						align: 'center',
						toolbar: '#barDemo_hash'
					}
				]
			]
		});
		//监听事件
		//监听工具条
		table.on('tool(test_hash)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			console.log(obj);

			if (layEvent === 'detail') { //查看
				layer.msg(JSON.stringify(obj.data));
				//do somehing
			} else if (layEvent === 'del') { //删除
				layer.confirm('真的删除行么', function(index) {
					obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
					layer.close(index);
					//向服务端发送删除指令
				});
			} else if (layEvent === 'edit') { //编辑
				//do something

				//同步更新缓存对应的值
				obj.update({
					username: '123',
					title: 'xxx'
				});
			}
		});

		$('#search_hash').on('click', function() {
			var that = this;
			console.log($('#search_tpl_hash').html());
			sidebar.render({
				elem: that,
				content: $('#search_tpl_hash').html(),
				title: '搜索',
				shade: true,
				// shadeClose:false,
				// direction: 'left'
				// dynamicRender: false,
				// url: 'views/member/all/search.html',
				width: '500px', //可以设置百分比和px
				done: function() {
					console.log('ccc');
					form.render();

					//监听提交
					form.on('submit(formDemo_hash)', function(data) {
						// layer.msg(JSON.stringify(data.field));
						table.reload('demo_hash', {
							where: data.field
						});
						return false;
					});
				}
			});
		});
	});
</script>
<script>
	layui.use(['tree', 'util'], function() {
		var tree = layui.tree,
			layer = layui.layer,
			util = layui.util

			//模拟数据
			,
			data = [{
				title: '一级1',
				id: 1,
				field: 'name1',
				checked: true,
				spread: true,
				children: [{
					title: '二级1-1 可允许跳转',
					id: 3,
					field: 'name11',
					href: 'https://www.layui.com/',
					children: [{
						title: '三级1-1-3',
						id: 23,
						field: '',
						children: [{
							title: '四级1-1-3-1',
							id: 24,
							field: '',
							children: [{
								title: '五级1-1-3-1-1',
								id: 30,
								field: ''
							}, {
								title: '五级1-1-3-1-2',
								id: 31,
								field: ''
							}]
						}]
					}, {
						title: '三级1-1-1',
						id: 7,
						field: '',
						children: [{
							title: '四级1-1-1-1 可允许跳转',
							id: 15,
							field: '',
							href: 'https://www.layui.com/doc/'
						}]
					}, {
						title: '三级1-1-2',
						id: 8,
						field: '',
						children: [{
							title: '四级1-1-2-1',
							id: 32,
							field: ''
						}]
					}]
				}, {
					title: '二级1-2',
					id: 4,
					spread: true,
					children: [{
						title: '三级1-2-1',
						id: 9,
						field: '',
						disabled: true
					}, {
						title: '三级1-2-2',
						id: 10,
						field: ''
					}]
				}, {
					title: '二级1-3',
					id: 20,
					field: '',
					children: [{
						title: '三级1-3-1',
						id: 21,
						field: ''
					}, {
						title: '三级1-3-2',
						id: 22,
						field: ''
					}]
				}]
			}, {
				title: '一级2',
				id: 2,
				field: '',
				spread: true,
				children: [{
					title: '二级2-1',
					id: 5,
					field: '',
					spread: true,
					children: [{
						title: '三级2-1-1',
						id: 11,
						field: ''
					}, {
						title: '三级2-1-2',
						id: 12,
						field: ''
					}]
				}, {
					title: '二级2-2',
					id: 6,
					field: '',
					children: [{
						title: '三级2-2-1',
						id: 13,
						field: ''
					}, {
						title: '三级2-2-2',
						id: 14,
						field: '',
						disabled: true
					}]
				}]
			}, {
				title: '一级3',
				id: 16,
				field: '',
				children: [{
					title: '二级3-1',
					id: 17,
					field: '',
					fixed: true,
					children: [{
						title: '三级3-1-1',
						id: 18,
						field: ''
					}, {
						title: '三级3-1-2',
						id: 19,
						field: ''
					}]
				}, {
					title: '二级3-2',
					id: 27,
					field: '',
					children: [{
						title: '三级3-2-1',
						id: 28,
						field: ''
					}, {
						title: '三级3-2-2',
						id: 29,
						field: ''
					}]
				}]
			}]

			//模拟数据1
			,
			data1 = [{
				title: '江西',
				id: 1,
				children: [{
					title: '南昌',
					id: 1000,
					children: [{
						title: '青山湖区',
						id: 10001
					}, {
						title: '高新区',
						id: 10002
					}]
				}, {
					title: '九江',
					id: 1001
				}, {
					title: '赣州',
					id: 1002
				}]
			}, {
				title: '广西',
				id: 2,
				children: [{
					title: '南宁',
					id: 2000
				}, {
					title: '桂林',
					id: 2001
				}]
			}, {
				title: '陕西',
				id: 3,
				children: [{
					title: '西安',
					id: 3000
				}, {
					title: '延安',
					id: 3001
				}]
			}]



		//基本演示
		tree.render({
			elem: '#test12',
			data: data,
			showCheckbox: true //是否显示复选框
				,
			id: 'demoId1',
			isJump: true //是否允许点击节点时弹出新窗口跳转
				,
			click: function(obj) {
				var data = obj.data; //获取当前点击的节点数据
				layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
			}
		});

		//按钮事件
		util.event('lay-demo', {
			getChecked: function(othis) {
				var checkedData = tree.getChecked('demoId1'); //获取选中节点的数据

				layer.alert(JSON.stringify(checkedData), {
					shade: 0
				});
				console.log(checkedData);
			},
			setChecked: function() {
				tree.setChecked('demoId1', [12, 16]); //勾选指定节点
			},
			reload: function() {
				//重载实例
				tree.reload('demoId1', {

				});

			}
		});

		//常规用法
		tree.render({
			elem: '#test1' //默认是点击节点可进行收缩
				,
			data: data1
		});

	});
</script>
<style scoped>

</style>
